<template>
	<view class="flex-col page">
		<view class="flex-col group_3">
			<view class="flex-col justify-start items-start text-wrapper">
				<text class="font_3 text_5">设置起止时间</text>
			</view>
			<view class="flex-col section">
				<view class="flex-row justify-center group_4 space-x-22">
					<view class="flex-row justify-between section_2 items-center" @click="show1=true,show2=false">
						<text class="font_4 text_6" :class="time1==''?'':'text_7'">{{time1==''?'请选择':time1}}</text>
						<image class="image_5" :class="show1?'rotate':''" src="/static/more-2.png" />
					</view>
					<text class="font_4 text_8">至</text>
					<view class="flex-row justify-between section_3 items-center" @click="show2=true,show1=false">
						<text class="font_4 text_6" :class="time2==''?'':'text_7'">{{time2==''?'请选择':time2}}</text>
						<image class="image_5 image_7" :class="show2?'rotate':''" src="/static/more-2.png" />
					</view>
				</view>
				<view class="flex-row justify-center" style="position: relative;">
					<view class="flex-col section_4 left" v-show="show1">
						<view class="swiper">
							<swiper style="height: 100%;" :autoplay="false" :duration="500" :display-multiple-items="2"
								:vertical='true' :circular="true" previous-margin="60rpx" @change="onChange">
								<swiper-item v-for="(item,index) in swiperurl" :key="index"
									class="flex-row items-center justify-center">
									<view class="swiper-item" :style="index==currentSwiper?'opacity: 1;':''">{{item}}
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view class="flex-col group_7 space-y-46">
							<view class="flex-col justify-start items-center button" @click="toSub(1)">
								<text class="font_3 text_10">确认</text>
							</view>
						</view>
					</view>
					<view class="flex-col section_4 right" v-show="show2">
						<view class="swiper">
							<swiper style="height: 100%;" :autoplay="false" :duration="500" :display-multiple-items="2"
								:vertical='true' :circular="true" previous-margin="60rpx" @change="onChange1">
								<swiper-item v-for="(item,index) in swiperurl" :key="index"
									class="flex-row items-center justify-center">
									<view class="swiper-item" :style="index==currentSwiper1?'opacity: 1;':''">{{item}}
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view class="flex-col group_7 space-y-46">
							<view class="flex-col justify-start items-center button" @click="toSub(2)">
								<text class="font_3 text_10">确认</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col justify-start items-center self-center button1" @click="toData">
			<text class="text_9">保存</text>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show1: false,
				show2: false,
				currentSwiper: 0, //首页轮播图index值
				currentSwiper1: 0, //首页轮播图index值
				swiperurl: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
				time1: '',
				time2: '',
				shop_id: '',
				mas_id: ''
			};
		},
		onLoad() {
			this.getData()
			let list = []
			for (let i = 0; i < 25; i++) {
				let time = i < 10 ? '0' + i + ':00' : i + ':00'
				list.push(time)
			}
			this.swiperurl = list
		},
		methods: {
			getData() {
				this.$req.requestPOST(this.$api.CenterInfo.getInfo, {
					shop_id: uni.getStorageSync('shop_id'),
				}).then((res) => {
					this.time1 = res.data.business_time[0]
					this.time2 = res.data.business_time[1]
				})
			},
			onChange: function(e) {
				this.currentSwiper = e.detail.current
				console.log(this.swiperurl[e.detail.current]);
			},
			onChange1: function(e) {
				this.currentSwiper1 = e.detail.current
			},
			ret() {
				uni.navigateBack()
			},
			toData() {
				this.$req.requestPOST(this.$api.CenterInfo.setBussiness, {
					business_time:this.time1+'-'+ this.time2,
					shop_id: uni.getStorageSync('shop_id'),
				}).then((res) => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.flag == "success") {
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000)
					}
				})
			},
			toSub(type) {
				if (type == 1) {
					this.time1 = this.swiperurl[this.currentSwiper]
					this.show1 = false
				} else {
					this.time2 = this.swiperurl[this.currentSwiper1]
					this.show2 = false
				}
			}
		},
	};
</script>

<style scoped lang="css">
	.page {
		background-color: #fafafa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		/* padding-top: 80rpx; */
	}

	.section1 {
		padding: 0.84rem 1.25rem;
		background-color: #ffffff;
		position: relative;
	}

	.text_3 {
		color: #333333;
		font-size: 1.13rem;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 1.06rem;
	}

	.text_4 {
		width: 4.13rem;
		text-align: right;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #3366FF;
	}

	.image_4 {
		/* position: absolute;
		right: 1.25rem;
		top: 50%; */
		/* transform: translateY(-50%); */
		width: 4.13rem;
		height: 1rem;
	}

	.image_4>image {
		width: 19rpx;
		height: 34rpx;
	}

	.font_2 {
		font-size: 1.13rem;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.group_3 {
		padding-top: 0.063rem;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.text-wrapper {
		padding: 1.22rem 0 1.19rem;
		background-color: #ffffff;
	}

	.font_3 {
		font-size: 0.88rem;
		font-family: PingFang SC;
		line-height: 0.84rem;
		font-weight: 500;
	}

	.text_5 {
		margin-left: 1.28rem;
		color: #000000;
	}

	.section {
		padding: 0 1.25rem 25.47rem;
		background-color: #ffffff;
	}

	.group_4 {
		padding-top: 0.34rem;
	}

	.space-x-22>view:not(:first-child),
	.space-x-22>text:not(:first-child),
	.space-x-22>image:not(:first-child) {
		margin-left: 0.69rem;
	}

	.section_2 {
		padding: 1.06rem 0.75rem 1.06rem 0.78rem;
		background-color: #f6f6f6;
		border-radius: 0.63rem;
		height: 2.75rem;
		width: 290rpx;
	}

	.font_4 {
		font-size: 0.81rem;
		font-family: PingFang SC;
		color: #333333;
	}

	.text_7 {
		color: #333 !important;
	}

	.image_5 {
		flex-shrink: 0;
		width: 0.44rem;
		height: 0.25rem;
	}

	.image_6 {
		margin: 0.19rem 0 0.19rem 5.19rem;
	}

	.text_8 {
		align-self: center;
		line-height: 0.72rem;
	}

	.section_3 {
		padding: 0.97rem 0.75rem 1rem;
		background-color: #f6f6f6;
		border-radius: 0.63rem;
		height: 2.75rem;
		width: 290rpx;
	}

	.text_6 {
		color: #bdbdbd;
		line-height: 0.78rem;
	}

	.image_7 {
		/* margin: 0.28rem 0 0.25rem 4.97rem; */
		/* transform: rotate(180deg); */
	}

	.rotate {
		transform: rotate(180deg);
	}

	.section_4 {
		padding: 2rem 1.25rem 0;
		align-self: flex-end;
		background-color: #ffffff;
		box-shadow: 0px 0.5rem 1.56rem #00000026;
		border-radius: 0px 0px 0.63rem 0.63rem;
		width: 9.38rem;
	}

	.left {
		width: 290rpx;
		position: absolute;
		left: 10rpx;
		top: 0;
	}

	.right {
		width: 290rpx;
		position: absolute;
		right: 10rpx;
		top: 0;
	}

	.section_4:nth-child(1) {
		margin-right: 62rpx;
	}

	.swiper {
		height: 200rpx;
	}

	.swiper /deep/uni-swiper-item {
		background-image: linear-gradient(90deg, #fff 0%, #fff 100%);
		-webkit-background-clip: text;
		color: transparent;
		height: 30%;
		width: 55% !important;
		left: 22.5%;
		border-top: 1rpx solid #00000026;
		/* color: #d6000f; */
	}

	.swiper-item {

		font-size: 36rpx;
		color: #000000;
		opacity: 0.4;
		text-align: center;
	}

	.group_5 {
		padding: 0 1.56rem;
	}

	.space-y-42>view:not(:first-child),
	.space-y-42>text:not(:first-child),
	.space-y-42>image:not(:first-child) {
		margin-top: 1.31rem;
	}

	.image_8 {
		align-self: center;
		width: 2.28rem;
		height: 0.66rem;
	}

	.section_5 {
		background-color: #f2f3f7;
		border-radius: 0.031rem;
		height: 0.063rem;
	}

	.group_6 {
		padding: 1.06rem 1.56rem 0;
	}

	.space-y-34>view:not(:first-child),
	.space-y-34>text:not(:first-child),
	.space-y-34>image:not(:first-child) {
		margin-top: 1.06rem;
	}

	/* .text_9 {
		margin-left: 0.41rem;
		color: #f08300;
		line-height: 0.84rem;
	} */

	.group_7 {
		padding: 1.38rem 0 0.88rem;
	}

	.space-y-46>view:not(:first-child),
	.space-y-46>text:not(:first-child),
	.space-y-46>image:not(:first-child) {
		margin-top: 1.44rem;
	}

	.image_9 {
		align-self: center;
		width: 2.22rem;
		height: 0.66rem;
	}

	.button {
		padding: 0.56rem 0 0.59rem;
		background-color: #000000;
		background: linear-gradient(0deg, #1EBDFF, #6ED5FF);
		border-radius: 50rpx;
		width: 6.88rem;
	}

	.text_10 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.button1 {
		padding: 36rpx 0;
		background-color: #54bc6e;
		border-radius: 24rpx;
		width: 630rpx;
		position: fixed;
		bottom: 50rpx;


	}

	.text_9 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
	}
</style>